import Base from "../Base.js";
import theatersApi from "../../api/theaters.js";
import cinApi from '../../api/cinemas.js';
import seatsApi from '../../api/seats.js'
export default class extends Base {
  constructor(props) {
    super(props);
    this.data = {};
    this.cinemas = [];

  }

  async mounted() {//获取所有影院
    this.cinemas = await cinApi.get();
    this.rerender();
  }

  handle() {
    layui.form.on('submit(*)', async (data, e) => {
      let event = e || window.event;
      event.preventDefault();//.阻止默认事件
      let obj = data.field
      if (!obj.name) {
        alert('请输入名字');
        return
      }
      let data1 = await theatersApi.add(obj);
      console.log(data1);
      const seat = {
        row: "9",
        col: "9",
        theaterId: data1._id,
      };

      let data2 = await seatsApi.add(seat);
      console.log(data2);
      return false;
    });

  };

  rerender() {
    this.data.cinemas = this.cinemas[0]._id;
    this.cinemasEle.html(`
    ${this.cinemas.map(item => {
      return `<option value=${item._id}>${item.name}</option>`
    }).join('')}
    `).val(this.data.cinemas);
    layui.form.render();
  }
  render() {
    this.el.html(`
        <div style="background-color: #ffffff;opacity:0.8;color:black">
        <h1>新增放映厅</h1>
        <form class="layui-form" action="#"  >
        <div class="layui-form-item">
          <label class="layui-form-label">放映厅</label>
          <div class="layui-input-inline">
            <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input name">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">所属影院</label>
          <div class="layui-input-inline">
            <select name="cinemasId" lay-verify="required" class='cinemas'>
            </select>
          </div>
        </div>
      
        <div class="layui-form-item">
        <label class="layui-form-label">是否营业</label>
        <div class="layui-input-block">
          <input type="radio" name="status" value="true" title="是" checked >
          <input type="radio" name="status" value="false" title="否" >
        </div>
      </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
       
        `);
    layui.form.render();
    this.cinemasEle = $('.cinemas');
    this.addEle = $('.submit');
    this.nameEle = $('.name');
    this.statusEle = $('input[name=status]');

  }
}
